<template>
  <d2-container>
    <div class="flex-1 mx-2 mt-2">
      <div class="flex-1 row-ac justify-end">
        <div class="row-ab">
          <span class="mr-2 font-s-1">第</span>
          <div class="" style="width: 30rpx;">
            <el-input-number v-model="queryInfo.page" :precision="0" :min="0" :step="1"></el-input-number>
          </div>
          <span class="font-s-2 ml-1">页</span>
        </div>

        <div class="ml-2"><el-button size="small" @click="getNovelSearch" type="warning">找小说</el-button></div>
      </div>
      <div class="flex-1 mt-2">
        <el-table :data="novelList" border stripe>
          <el-table-column align="center" label="序号" type="index" width="65" />
          <el-table-column align="center" label="分类名称" prop="name" width="130" />
          <el-table-column align="center" label="小说源地址" prop="url" width="130" />
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="novelDetails(scope.row)">小说详情</el-button>
              <el-button size="mini" type="danger" v-if="scope.row.novel_spider">已添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog :visible.sync="dialogVisible" width="42%" title="小说详情">
        <div class="flex-1 mx-2 d-f">
          <div class="mr-2">
            <img :src="formNovel.cover_image" class="novel-img" alt="">
          </div>
          <div class="flex-1">
            <div class="row-ac font-s-2">
              <div class="text-light-grey mr-1">小说名称:</div>
              <div>{{ formNovel.name }}</div>
            </div>
            <div class="row-ac font-s-2 mt-1">
              <div class="text-light-grey mr-1">作者:</div>
              <div>{{ formNovel.author }}</div>
            </div>
            <div class="font-s-2 mt-3">
              <div class="">小说简介:</div>
              <div class="mt-1">{{ formNovel.introduction }}</div>
            </div>
          </div>
        </div>
        <div class="mt-3 row">
          <div class="mr-5">
            <el-button type="danger" size="small" @click="dialogVisible = false">关闭</el-button>
          </div>
          <div>
            <el-button type="danger" size="small" v-if="submitState">小说已添加</el-button>
            <el-button type="success" size="small" v-else @click="submitForm">添加小说</el-button>
          </div>

        </div>
      </el-dialog>
    </div>
  </d2-container>
</template>

<script>
  import {
    novelSearchUrl,
    noveldetailsSearchUrl,
    chapterSearchUrl,
    novelCreateUrl
  } from "@/utils/novel"
  export default {
    data() {
      return {
        dialogVisible: false,
        submitState: false,
        queryInfo: {
          page: 1
        },
        novelList: [],
        formNovel: {
          name: '',
          author: '',
          cover_image: '',
          introduction: '',
          source_url: '',
          category: ''
        }
      }
    },
    methods: {
      getNovelSearch() {
        this.$get(novelSearchUrl, this.queryInfo).then(res => {
          this.novelList = res.data.data;
          console.log(this.novelList);
        })
      },
      novelDetails(item) {
        if (item.novel_spider) {
          this.submitState = true
        }
        this.$get(noveldetailsSearchUrl + item.url + '/').then(res => {
          if (res.data.novel_category == "玄幻魔法") {
            this.categoryId = 6
          } else if (res.data.novel_category == "都市言情") {
            this.categoryId = 3
          } else if (res.data.novel_category == "武侠修真") {
            this.categoryId = 11
          } else if (res.data.novel_category == "历史军事") {
            this.categoryId = 12
          } else if (res.data.novel_category == "侦探推理") {
            this.categoryId = 13
          } else if (res.data.novel_category == "网游动漫") {
            this.categoryId = 14
          } else if (res.data.novel_category == "科幻小说") {
            this.categoryId = 15
          } else if (res.data.novel_category == "其他类型") {
            this.categoryId = 16
          }
          this.formNovel = {
            name: res.data.novel_title,
            author: res.data.novel_author,
            cover_image: res.data.novel_img,
            introduction: res.data.novel_content,
            source_url: res.data.novel_url,
            category: this.categoryId
          }
          this.dialogVisible = true

        })
      },
      submitForm() {
        this.$post(novelCreateUrl, this.formNovel).then(res => {
          this.dialogVisible = false
          this.$message.success('添加成功')
          this.formNovel = {}
        })
      }
    }
  }
</script>

<style>
  .novel-img {
    width: 158px;
    height: 203px;
  }
</style>